<template>
  <basicModal
    @register="register"
    ref="modalRef"
    @before-ok="okModal"
    :modal-style="{ width: '700px' }"
  >
    <template #default>
      <BasicForm @register="formRegister" @reset="handleReset" class="basicForm">
        <template #statusSlot="{ model, field }">
          <a-input v-model:value="model[field]" placeholder="请输入状态" />
        </template>
      </BasicForm>
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import { basicModal, useModal } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { Message } from '@arco-design/web-vue';

  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '姓名',
      labelMessage: '这是一个提示',
      componentProps: {
        placeholder: '请输入姓名',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      field: 'mobile',
      component: 'InputNumber',
      label: '手机',
      componentProps: {
        placeholder: '请输入手机号码',
        hideButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'type',
      component: 'Select',
      label: '类型',
      componentProps: {
        placeholder: '请选择类型',
        options: [
          {
            label: '舒适性',
            value: 1,
          },
          {
            label: '经济性',
            value: 2,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeDate',
      component: 'DatePicker',
      label: '预约时间',
      defaultValue: '',
      componentProps: {
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeTime',
      component: 'TimePicker',
      label: '停留时间',
      componentProps: {
        allowClear: true,
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeProject',
      component: 'Checkbox',
      label: '预约项目',
      componentProps: {
        placeholder: '请选择预约项目',
        options: [
          {
            label: '种牙',
            value: 1,
          },
          {
            label: '补牙',
            value: 2,
          },
          {
            label: '根管',
            value: 3,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeSource',
      component: 'RadioGroup',
      label: '来源',
      componentProps: {
        options: [
          {
            label: '网上',
            value: 1,
          },
          {
            label: '门店',
            value: 2,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'status',
      label: '状态',
      //插槽
      slot: 'statusSlot',
    },
  ];

  const [formRegister, { submit, getFieldsValue }] = useForm({
    rowProps: { gutter: [16, 8], wrap: true },
    colProps: {
      span: 12,
    },
    labelColProps: { span: 6 },
    wrapperColProps: { span: 18 },
    layout: 'horizontal',
    submitButtonText: '提交预约1',
    showActionButtonGroup: false,
    schemas,
  });

  const [register, { openModal, closeModal, setSubLoading }] = useModal({
    title: '新增预约',
    okText: '提交预约',
    width: 700,
    maskClosable: false,
  });

  async function okModal() {
    const formRes = await submit();
    if (formRes) {
      closeModal();
      Message.success(JSON.stringify(getFieldsValue()));
    } else {
      Message.error('验证失败，请填写完整信息');
      setSubLoading(false);
      return false;
    }
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }

  //导出方法
  defineExpose({
    openModal,
  });
</script>
